<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="data:;base64,=">
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<title>ESP8266</title>
	</head>
	<body>
		<center><h2>ESP8266 Web Configarate</h2>
		<form>
			<fieldset>
				<legend style="color:rgba(247,171,0,1);">&#8595; wifi config &#8595;</legend>
				<label>wifi name:</label>
				<input id="1" placeholder= "wifi name">
				<br/>
				<br/>
				<label>Password:</label>
				<input id="2" placeholder= "password">
			</fieldset>
		</form>	
		<br/>
		<br/>
		<form>
			<fieldset>
				<legend style="color:rgba(247,171,0,1);">&#8595; MQTT config &#8595;</legend>
				<label>Server IP:</label>
				<input id="3" value="106.12.184.169">
				<br/>
				<br/>
				<label>Server Port:</label>
				<input id="4" value="2021">
				<br/>
				<br/>
				<label>User Name:</label>
				<input id="5" value="ESP8266_MQTT">	
				<br/>
				<br/>
				<label>Password:</label>
				<input id="6" value="ESP8266_MQTT">		
			</fieldset>
		</form>	
		<br/>
		<br/>
		<button style="width:100px;height:60px" onclick="button()">  OK  </button>
		
		<script>
			function Get_Input_Value_By_ID(id)
			{
				var obj = document.getElementById(id);
				return obj.value;
			}
			function http_send(str)
			{
				let httpRequest = new XMLHttpRequest();
				
				httpRequest.open('POST', 'www.8266.com', true);
				
				httpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				
				httpRequest.send(str);
				
				httpRequest.onreadystatechange = function () {//请求后的回调接口，可将请求成功后要执行的程序写在其中
				                if (httpRequest.readyState == 4 && httpRequest.status == 200) {//验证请求是否发送成功
				                    var json = httpRequest.responseText;//获取到服务端返回的数据
				                    console.log(json);
				                }
				            };
				return 0;
			}
			function button()
			{
				var str = "a=" + Get_Input_Value_By_ID('1') + "&b=" + Get_Input_Value_By_ID('2');
				str = str + "&c=" + Get_Input_Value_By_ID('3') + "&d=" + Get_Input_Value_By_ID('4');
				str = str + "&e=" + Get_Input_Value_By_ID('5') + "&f=" + Get_Input_Value_By_ID('6');
				console.log(str);
				http_send(str);
				return 0;
			}
		</script>
	</body>
</html>
